import 'package:flutter/material.dart';
import 'package:flutter_09_game/config/app_color.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

/// 步骤进度条组件
class StepperWidget extends StatelessWidget {
  const StepperWidget({
    super.key,
    required this.steps,
    required this.currentStep,
  });

  final List<StepperItem> steps;
  final int currentStep;

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 4.w),
      child: Column(
        children: [
          // 步骤指示器
          _buildStepIndicators(),
          8.verticalSpaceFromWidth,
          // 步骤标题
          _buildStepTitles(),
          8.verticalSpaceFromWidth,
          // 步骤时间
          _buildStepTimes(),
        ],
      ),
    );
  }

  /// 构建步骤指示器
  Widget _buildStepIndicators() {
    return Row(
      children: [
        for (int i = 0; i < steps.length; i++) ...[
          // 步骤圆圈
          _buildStepCircle(i),
          // 连接线（最后一个步骤不需要连接线）
          if (i < steps.length - 1) _buildConnectLine(i),
        ],
      ],
    );
  }

  /// 构建步骤圆圈
  Widget _buildStepCircle(int index) {
    final isCompleted = index < currentStep;
    final isCurrent = index == currentStep;

    Color backgroundColor;
    Color textColor;
    Widget child;

    if (isCompleted) {
      backgroundColor = AppColor.primary;
      textColor = AppColor.textPrimary.withOpacity(0.94);
      child = Text(
        '${index + 1}',
        style: TextStyle(
          fontSize: 12.sp,
          fontWeight: FontWeight.w700,
          color: textColor,
        ),
      );
    } else if (isCurrent) {
      backgroundColor = AppColor.primary;
      textColor = AppColor.textPrimary.withOpacity(0.94);
      child = Text(
        '${index + 1}',
        style: TextStyle(
          fontSize: 12.sp,
          fontWeight: FontWeight.w700,
          color: textColor,
        ),
      );
    } else {
      backgroundColor = AppColor.textPrimary.withOpacity(0.15);
      textColor = AppColor.textPrimary.withOpacity(0.94);
      child = Text(
        '${index + 1}',
        style: TextStyle(
          fontSize: 12.sp,
          fontWeight: FontWeight.w700,
          color: textColor,
        ),
      );
    }

    return Container(
      width: 24.w,
      height: 24.w,
      decoration: BoxDecoration(
        color: backgroundColor,
        shape: BoxShape.circle,
      ),
      child: Center(child: child),
    );
  }

  /// 构建连接线
  Widget _buildConnectLine(int index) {
    final isCompleted = index < currentStep - 1;

    return Expanded(
      child: Container(
        height: 3.w,
        margin: EdgeInsets.symmetric(horizontal: 12.w),
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(100.w),
          gradient: isCompleted
              ? LinearGradient(
                  colors: [
                    AppColor.primary,
                    AppColor.primary.withOpacity(0),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                )
              : LinearGradient(
                  colors: [
                    AppColor.textPrimary.withOpacity(0.2),
                    AppColor.textPrimary.withOpacity(0),
                  ],
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
        ),
      ),
    );
  }

  /// 构建步骤标题
  Widget _buildStepTitles() {
    return Row(
      children: [
        for (int i = 0; i < steps.length; i++) ...[
          Expanded(
            child: Text(
              steps[i].title,
              textAlign: i == 0
                  ? TextAlign.left
                  : i == steps.length - 1
                      ? TextAlign.right
                      : TextAlign.center,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w400,
                color: AppColor.textPrimary.withOpacity(0.94),
              ),
            ),
          ),
          if (i < steps.length - 1) 10.horizontalSpace,
        ],
      ],
    );
  }

  /// 构建步骤时间
  Widget _buildStepTimes() {
    return Row(
      children: [
        for (int i = 0; i < steps.length; i++) ...[
          Expanded(
            child: Text(
              steps[i].time ?? '',
              textAlign: i == 0
                  ? TextAlign.left
                  : i == steps.length - 1
                      ? TextAlign.right
                      : TextAlign.center,
              style: TextStyle(
                fontSize: 12.sp,
                fontWeight: FontWeight.w400,
                color: AppColor.textPrimary.withOpacity(0.7),
              ),
            ),
          ),
          if (i < steps.length - 1) 10.horizontalSpace,
        ],
      ],
    );
  }
}

/// 步骤项数据模型
class StepperItem {
  final String title;
  final String? time;

  const StepperItem({
    required this.title,
    this.time,
  });
}
